<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="首页" content="首页">
        <meta description="首页" content="首页">
        <title>手机列表</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul, ol {
                list-style: none;
            }
            .mobile-list {
                width: 1030px;
                margin: 50px auto 0;
                text-align: center;
            }
            .mobile-list>li {
                box-sizing: border-box;
                width: 250px;
                display: inline-block;
                border: 1px solid;
            }

            .mobile-list .title{
                font-size: 14px;
                font-weight: 400;
                line-height: 42px;
            }
            .mobile-list .desc {
            font-size: 12px;
            color: #B0B2B9;
            }

            .mobile-list .price {
                font-size: 12px;
                color: #444;
                line-height: 28px;
            }

            .mobile-list .num {
                color: red;
            }
        </style>
    </head>
    <body>
        <ul class="mobile-list">
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            
        </ul>

    </body>
</html>
